<style>
p .fa-home {
	margin:10px
}
</style> 
<div ui-view="" class="fade-in ng-scope"><div class="bg-light lter b-b wrapper-md ng-scope">
  <h1 class="m-n font-thin h3" translate="forms.tooltip.name"></h1>
</div>
<div class="wrapper-md ng-scope">
	<div class="row">
		<!--常用提示框-->
		<div class="col-sm-6">
			<div class="panel panel-default">
				<!--面板标题-->
				<div class="panel-heading font-bold" translate="forms.tooltip.normal"></div>
		 		<div class="panel-body">
		 		<p>可以为输入框、按钮和图标等添加<code>uib-tooltip</code>属性来创建提示框</p>		 	
		 		<p>
					<input  uib-tooltip="{{'common.op.remind2' | translate}}" placeholder="输入框"/>
					<button type="button" class="btn btn-primary" uib-tooltip="按钮"> 按钮</button>
					<i class="fa fa-home" tooltip-placement="right" uib-tooltip="主页"></i>
				</p>
				</div>
			</div>
		</div>
		<!--提示框位置-->
		<div class="col-sm-6">
			<div class="panel panel-default">
				<!--面板标题-->
				<div class="panel-heading font-bold" translate="forms.tooltip.location"></div>
		 		<div class="panel-body">
		 		<p>可使用<code>tooltip-placement</code>属性来改变提示框的位置</p>
					<button type="button" class="btn btn-default" uib-tooltip="默认的 Tooltip"> 默认的 Tooltip</button>
					<button type="button" class="btn btn-primary" uib-tooltip="左侧的 Tooltip" tooltip-placement="left">左侧的 Tooltip
					</button>
					<button type="button" class="btn btn-success" uib-tooltip="右侧的 Tooltip" tooltip-placement="right">右侧的 Tooltip</button>
					<button type="button" class="btn btn-info" uib-tooltip="顶部的 Tooltip" tooltip-placement="top">顶部的 Tooltip
					</button>
					<button type="button" class="btn btn-warning" uib-tooltip="底部的 Tooltip" tooltip-placement="bottom">底部的 Tooltip
					</button>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<!--弹出提示框-->
		<div class="col-sm-6">
			<div class="panel panel-default">
				<!--面板标题-->
				<div class="panel-heading font-bold" translate="forms.tooltip.pop"></div>
		 		<div class="panel-body">
		 		<p>可以为按钮添加点击事件<code>ng-click</code>并在控制器中编写提示框类型，
		 			<code>notify</code>通知提示框，<code>confirm</code>确认提示框</p>
					<button type="button" class="btn btn-default" ng-click="vm.click()">通知提示框</button>
					<button type="button" class="btn btn-dark" ng-click="vm.clickone()">确认提示框</button>
					<!-- <button type="button" class="btn btn-default"   
							data-container="body" data-toggle="popover" data-placement="right" 
							data-content="右侧的 Popover 中的一些内容">
							代码
						</button> -->
				</div>
			</div>
		</div>
	</div>
</div>
<script>
$(function () { 
	$("[data-toggle='popover']").popover();
});
</script> 